import React, { PureComponent } from 'react';

import Footer from "@/components/Footer";
import style from "./index.module.scss";
import store from "@/store"

export default class index extends PureComponent {

  state={
    count:store.getState().count,
    books:store.getState().books
  }

  componentDidMount(){
    store.subscribe(()=>{
      console.log("仓库的状态发生了变化,store.getState()",store.getState());
      this.setState({
        count:store.getState().count,
        books:store.getState().books
      })
    })
  }

  add=()=>{
    // 派发action到reducer
    // 1、dispatch接收的是对象（addAction(2)函数的返回值是对象）
    // store.dispatch(addAction(2));
    // 2、dispatch接收的是函数（addActionAsync()函数的返回值是函数）
   
  }

  sub=()=>{
 
  }

  addBook=()=>{
   
  }

  delBook=()=>{
    
  }

  render() {
    console.log("store.getState()",store.getState());
    return (
      <div className={style.homebox} >
        <div className={style.main}>
          <h1>我的</h1>
          <p>count：{this.state.count}</p>
          <input type="button" value="加法" onClick={this.add} />
          <input type="button" value="减法" onClick={this.sub} />

          <hr/>
          <h5>书籍信息：</h5>
          <ul>
            {this.state.books.map(item=>(
              <li>
                <p>书籍编号：{item.id}</p>
                <p>书名：{item.name}</p>
              </li>
            ))}
          </ul>
          <input type="button" value="添加一本书" onClick={this.addBook} />
          <input type="button" value="删除id为01001的书" onClick={this.delBook} />
        </div>

        <div className={style.footer}>
          <Footer></Footer>
        </div>
      </div>
    )
  }
}
